"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Search,
  Filter,
  Clock,
  Eye,
  Heart,
  MessageSquare,
  Award,
  DollarSign,
  FileText,
  TrendingUp,
  User,
  ArrowLeft,
  BookOpen,
  Lightbulb,
  Building,
  Globe,
  BarChart3,
  Star,
  ChevronRight,
  Rocket,
  PieChart,
  Cpu
} from "lucide-react"
import { NewsAPI } from "@/lib/api"

export default function NewsPage() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [sortBy, setSortBy] = useState("latest")
  const [currentPage, setCurrentPage] = useState(1)
  const [newsData, setNewsData] = useState<any[]>([])
  const [loading, setLoading] = useState(false)
  const [trendingTopics, setTrendingTopics] = useState<string[]>([])

  // 扩展的模拟新闻数据
  const allNews = [
    {
      id: "news_001",
      type: "success_story",
      title: "90后小伙开奶茶店3年开了200家分店，年营收破亿的秘诀",
      summary: "从一家10平米小店到200家连锁，他是如何在竞争激烈的奶茶市场杀出重围的？深入解析成功背后的商业逻辑。",
      content: `
        这是一个关于坚持与创新的创业故事。李明，一个90后大学毕业生，在2021年用仅有的10万元积蓄开了一家小奶茶店...
        
        **成功关键因素：**
        1. 产品差异化：独特的茶叶配方和制作工艺
        2. 数字化运营：早期就建立了完善的会员系统
        3. 供应链管理：直接与茶叶产地合作，控制成本
        4. 品牌建设：年轻化的品牌形象和营销策略
        5. 标准化管理：统一的店面设计和服务标准
        
        **财务数据：**
        - 2021年：1家店，营收50万
        - 2022年：15家店，营收800万
        - 2023年：80家店，营收4500万
        - 2024年：200家店，营收预计1.2亿
        
        **未来规划：**
        李明计划在2025年将店面数量扩张到500家，并开始进军海外市场...
      `,
      category: "创业故事",
      industry: "food",
      publishTime: "2024-01-15T10:30:00Z",
      source: "创业邦",
      author: "张明华",
      tags: ["创业故事", "连锁经营", "奶茶行业", "数字化运营"],
      readTime: "8分钟",
      views: 15420,
      likes: 1205,
      comments: 89,
      priority: "high",
      featured: true,
      imageUrl: "/placeholder.jpg"
    },
    {
      id: "news_002",
      type: "funding_news",
      title: "AI教育赛道再获资本青睐，3家公司单月融资超10亿",
      summary: "人工智能+教育成为投资新热点，个性化学习、智能辅导等细分领域受到关注，投资机构看好AI教育的长期发展前景。",
      content: `
        2024年1月，AI教育领域迎来融资热潮，三家公司获得总计超过10亿元的投资...
        
        **本月融资情况：**
        1. 智学AI：A轮融资4.2亿元，由红杉资本领投
        2. 未来课堂：B轮融资3.8亿元，腾讯投资领投
        3. 个性化学习：Pre-A轮融资2.5亿元，经纬中国领投
        
        **市场分析：**
        - 中国AI教育市场规模预计2025年达到1000亿元
        - 个性化学习需求增长迅速
        - 政策支持数字化教育发展
        
        **投资趋势：**
        投资机构普遍看好AI教育的发展前景，认为个性化学习将成为教育行业的重要趋势...
      `,
      category: "投融资",
      industry: "tech",
      publishTime: "2024-01-15T09:15:00Z",
      source: "36氪",
      author: "李晓东",
      tags: ["AI教育", "投融资", "人工智能", "教育科技"],
      readTime: "10分钟",
      views: 8930,
      likes: 892,
      comments: 67,
      priority: "high",
      featured: true,
      imageUrl: "/placeholder.jpg"
    },
    {
      id: "news_003",
      type: "policy_analysis",
      title: "2024年创业扶持政策解读：税收优惠力度加大",
      summary: "新政策为初创企业提供更多支持，包括税收减免、资金补贴等多项措施，创业者迎来政策红利期。",
      content: `
        2024年国家出台了一系列创业扶持政策，为初创企业提供全方位支持...
        
        **主要政策内容：**
        1. 税收优惠：初创企业前三年免征企业所得税
        2. 资金补贴：提供最高100万元的创业启动资金
        3. 场地支持：免费提供孵化器工位
        4. 培训支持：免费创业培训和指导
        
        **申请条件：**
        - 注册时间不超过3年
        - 员工人数不超过50人
        - 年营收不超过1000万元
        
        **政策解读：**
        此次政策的出台体现了国家对创新创业的重视，为创业者提供了更好的发展环境...
      `,
      category: "政策解读",
      industry: "policy",
      publishTime: "2024-01-15T08:00:00Z",
      source: "人民日报",
      author: "王小明",
      tags: ["政策解读", "税收优惠", "创业扶持", "政府支持"],
      readTime: "6分钟",
      views: 6543,
      likes: 543,
      comments: 34,
      priority: "medium",
      featured: false,
      imageUrl: "/placeholder.jpg"
    },
    {
      id: "news_004",
      type: "market_analysis",
      title: "新能源汽车市场分析：2024年销量预计突破1000万辆",
      summary: "新能源汽车市场持续火热，技术进步和政策支持推动行业快速发展，预计2024年销量将实现新的突破。",
      content: `
        新能源汽车行业在2024年继续保持高速增长态势...
        
        **市场数据：**
        - 2023年销量：800万辆，同比增长35%
        - 2024年预计：1000万辆，同比增长25%
        - 市场渗透率：预计达到32%
        
        **主要驱动因素：**
        1. 技术进步：电池技术不断提升
        2. 成本下降：生产规模化降低成本
        3. 政策支持：购置税减免等优惠政策
        4. 基础设施：充电桩建设加快
        
        **市场机会：**
        - 三四线城市市场潜力巨大
        - 商用车电动化加速
        - 出海机会增多
        
        **投资建议：**
        建议关注电池技术、充电基础设施、智能驾驶等细分领域...
      `,
      category: "市场分析",
      industry: "automotive",
      publishTime: "2024-01-14T16:30:00Z",
      source: "财经网",
      author: "赵大伟",
      tags: ["新能源汽车", "市场分析", "销量预测", "投资机会"],
      readTime: "12分钟",
      views: 12350,
      likes: 987,
      comments: 156,
      priority: "high",
      featured: true,
      imageUrl: "/placeholder.jpg"
    },
    {
      id: "news_005",
      type: "industry_report",
      title: "直播电商行业报告：2024年GMV预计达2.5万亿",
      summary: "直播电商行业继续保持高速增长，短视频平台成为主要增长引擎，品牌商纷纷加大直播投入。",
      content: `
        直播电商行业在2024年迎来新的发展机遇...
        
        **行业数据：**
        - 2023年GMV：2.1万亿元
        - 2024年预计GMV：2.5万亿元
        - 用户规模：4.8亿人
        
        **发展趋势：**
        1. 短视频直播成为主流
        2. 品牌自播比例提升
        3. 供应链整合加速
        4. 国际化步伐加快
        
        **机会与挑战：**
        机会：下沉市场潜力大、出海机会多
        挑战：流量成本上升、竞争激烈
        
        **投资价值：**
        直播电商仍处于高速发展期，相关产业链企业值得关注...
      `,
      category: "行业报告",
      industry: "ecommerce",
      publishTime: "2024-01-14T14:20:00Z",
      source: "艾瑞咨询",
      author: "陈小红",
      tags: ["直播电商", "行业报告", "GMV", "市场前景"],
      readTime: "15分钟",
      views: 9876,
      likes: 756,
      comments: 98,
      priority: "medium",
      featured: false,
      imageUrl: "/placeholder.jpg"
    },
    {
      id: "news_006",
      type: "startup_tips",
      title: "创业者必读：如何在6个月内完成从0到1的产品验证",
      summary: "产品验证是创业成功的关键环节，本文分享了一套完整的产品验证方法论，帮助创业者快速验证商业假设。",
      content: `
        产品验证是创业过程中最重要的环节之一...
        
        **验证步骤：**
        1. 问题验证（1-2周）
        2. 解决方案验证（2-3周）
        3. 产品市场匹配验证（8-12周）
        4. 商业模式验证（4-6周）
        
        **验证方法：**
        - 用户访谈
        - 问卷调研
        - MVP测试
        - A/B测试
        - 数据分析
        
        **成功案例：**
        分享几个成功的产品验证案例...
        
        **常见误区：**
        1. 过早优化产品
        2. 忽视用户反馈
        3. 验证样本过小
        4. 主观判断过多
        
        **实用工具：**
        推荐一些实用的产品验证工具...
      `,
      category: "创业技巧",
      industry: "startup",
      publishTime: "2024-01-14T11:45:00Z",
      source: "人人都是产品经理",
      author: "刘产品",
      tags: ["产品验证", "创业技巧", "MVP", "用户调研"],
      readTime: "18分钟",
      views: 7654,
      likes: 890,
      comments: 234,
      priority: "medium",
      featured: false,
      imageUrl: "/placeholder.jpg"
    },
    {
      id: "news_007",
      type: "tech_trend",
      title: "2024年技术趋势预测：AI大模型、量子计算、Web3",
      summary: "技术发展日新月异，2024年将有哪些技术趋势值得关注？本文分析了AI大模型、量子计算、Web3等前沿技术的发展前景。",
      content: `
        2024年技术领域将迎来新的突破...
        
        **主要技术趋势：**
        1. AI大模型应用化
        2. 量子计算商业化
        3. Web3基础设施完善
        4. 边缘计算普及
        5. 绿色计算发展
        
        **AI大模型：**
        - GPT-5等新一代模型发布
        - 多模态能力增强
        - 行业应用深化
        
        **量子计算：**
        - 量子优势逐步显现
        - 商业应用开始落地
        - 投资热度持续
        
        **Web3：**
        - 基础设施日趋完善
        - 应用场景不断拓展
        - 监管政策逐步明朗
        
        **投资机会：**
        这些技术趋势将带来新的投资机会...
      `,
      category: "技术趋势",
      industry: "tech",
      publishTime: "2024-01-13T15:30:00Z",
      source: "钛媒体",
      author: "科技小王",
      tags: ["技术趋势", "AI大模型", "量子计算", "Web3"],
      readTime: "20分钟",
      views: 11234,
      likes: 1123,
      comments: 167,
      priority: "high",
      featured: true,
      imageUrl: "/placeholder.jpg"
    },
    {
      id: "news_008",
      type: "business_model",
      title: "订阅经济模式深度分析：如何打造可持续的商业模式",
      summary: "订阅经济正在改变传统商业模式，从软件到消费品，越来越多的企业采用订阅模式，本文深度分析订阅经济的核心要素。",
      content: `
        订阅经济已成为现代商业的重要模式...
        
        **订阅经济优势：**
        1. 现金流稳定
        2. 用户粘性高
        3. 价值持续创造
        4. 数据积累丰富
        
        **成功要素：**
        1. 产品价值：持续提供价值
        2. 用户体验：流畅的使用体验
        3. 定价策略：合理的定价模式
        4. 客户成功：主动的客户服务
        
        **典型案例：**
        - Netflix：视频订阅
        - Spotify：音乐订阅
        - Adobe：软件订阅
        - 盒马鲜生：生鲜订阅
        
        **关键指标：**
        - 月活跃用户数(MAU)
        - 客户生命周期价值(CLV)
        - 客户获取成本(CAC)
        - 流失率(Churn Rate)
        
        **实施建议：**
        如何在你的行业中应用订阅模式...
      `,
      category: "商业模式",
      industry: "business",
      publishTime: "2024-01-13T10:15:00Z",
      source: "哈佛商业评论",
      author: "商业分析师",
      tags: ["订阅经济", "商业模式", "SaaS", "用户粘性"],
      readTime: "16分钟",
      views: 8765,
      likes: 654,
      comments: 78,
      priority: "medium",
      featured: false,
      imageUrl: "/placeholder.jpg"
    },
    {
      id: "news_009",
      type: "financing_guide",
      title: "A轮融资全攻略：从准备到成功的完整指南",
      summary: "A轮融资是创业公司发展的重要节点，本文提供了完整的A轮融资攻略，包括准备工作、谈判技巧、法律条款等关键要点。",
      content: `
        A轮融资是创业公司成长的重要里程碑...
        
        **融资准备：**
        1. 商业计划书完善
        2. 财务数据整理
        3. 法律结构梳理
        4. 团队完整性
        
        **投资人选择：**
        - 行业背景匹配
        - 投资阶段匹配
        - 投资金额匹配
        - 增值服务能力
        
        **估值谈判：**
        - 市场对比法
        - 收益法
        - 成本法
        - 谈判技巧
        
        **法律条款：**
        - 优先股权利
        - 反稀释条款
        - 董事会席位
        - 拖拽权和跟拽权
        
        **常见问题：**
        A轮融资过程中的常见问题及解决方案...
        
        **成功案例：**
        分享几个成功的A轮融资案例...
      `,
      category: "融资指南",
      industry: "finance",
      publishTime: "2024-01-12T14:20:00Z",
      source: "投资界",
      author: "融资专家",
      tags: ["A轮融资", "融资指南", "估值谈判", "投资人"],
      readTime: "22分钟",
      views: 13456,
      likes: 1234,
      comments: 189,
      priority: "high",
      featured: true,
      imageUrl: "/placeholder.jpg"
    },
    {
      id: "news_010",
      type: "market_opportunity",
      title: "下沉市场机会分析：三四线城市的创业金矿",
      summary: "随着一二线城市竞争加剧，三四线城市的下沉市场成为新的创业机会，本文分析了下沉市场的特点和机会。",
      content: `
        下沉市场正成为创业者的新战场...
        
        **市场特点：**
        1. 用户基数大：6亿+用户
        2. 增长空间大：渗透率较低
        3. 成本优势：获客成本低
        4. 差异化需求：不同于一二线城市
        
        **机会领域：**
        - 本地生活服务
        - 教育培训
        - 医疗健康
        - 金融服务
        - 电商零售
        
        **成功案例：**
        1. 拼多多：社交电商
        2. 快手：短视频
        3. 趣头条：内容资讯
        4. 水滴筹：众筹平台
        
        **关键策略：**
        1. 产品本土化
        2. 价格敏感度
        3. 社交传播
        4. 线上线下结合
        
        **注意事项：**
        进入下沉市场需要注意的问题...
      `,
      category: "市场机会",
      industry: "market",
      publishTime: "2024-01-12T09:30:00Z",
      source: "亿欧网",
      author: "市场研究员",
      tags: ["下沉市场", "市场机会", "三四线城市", "创业机会"],
      readTime: "14分钟",
      views: 9876,
      likes: 876,
      comments: 123,
      priority: "medium",
      featured: false,
      imageUrl: "/placeholder.jpg"
    }
  ]

  const categories = [
    { id: "all", name: "全部", icon: Globe },
    { id: "startup", name: "创业故事", icon: Rocket },
    { id: "tech", name: "科技趋势", icon: Cpu },
    { id: "finance", name: "投融资", icon: DollarSign },
    { id: "policy", name: "政策解读", icon: FileText },
    { id: "market", name: "市场分析", icon: BarChart3 },
    { id: "business", name: "商业模式", icon: Building },
    { id: "industry", name: "行业报告", icon: PieChart },
    { id: "tips", name: "创业技巧", icon: Lightbulb }
  ]

  const sortOptions = [
    { id: "latest", name: "最新发布", icon: Clock },
    { id: "popular", name: "最受欢迎", icon: TrendingUp },
    { id: "viewed", name: "最多浏览", icon: Eye },
    { id: "liked", name: "最多点赞", icon: Heart }
  ]

  useEffect(() => {
    loadNews()
    loadTrendingTopics()
  }, [selectedCategory, sortBy, currentPage])

  const loadNews = async () => {
    setLoading(true)
    try {
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 500))
      
      let filteredNews = [...allNews]
      
      // 分类筛选
      if (selectedCategory !== "all") {
        filteredNews = filteredNews.filter(news => 
          news.industry === selectedCategory || 
          news.category.includes(getCategoryName(selectedCategory))
        )
      }
      
      // 排序
      if (sortBy === "latest") {
        filteredNews.sort((a, b) => new Date(b.publishTime).getTime() - new Date(a.publishTime).getTime())
      } else if (sortBy === "popular") {
        filteredNews.sort((a, b) => (b.likes + b.views/10) - (a.likes + a.views/10))
      } else if (sortBy === "viewed") {
        filteredNews.sort((a, b) => b.views - a.views)
      } else if (sortBy === "liked") {
        filteredNews.sort((a, b) => b.likes - a.likes)
      }
      
      setNewsData(filteredNews)
    } catch (error) {
      console.error("加载新闻失败:", error)
    } finally {
      setLoading(false)
    }
  }

  const loadTrendingTopics = () => {
    const topics = [
      "AI创业", "新能源", "直播电商", "下沉市场", "订阅经济", 
      "Web3", "量子计算", "元宇宙", "区块链", "大数据"
    ]
    setTrendingTopics(topics)
  }

  const getCategoryName = (categoryId: string) => {
    const category = categories.find(c => c.id === categoryId)
    return category ? category.name : ""
  }

  const handleNewsClick = (newsId: string) => {
    router.push(`/news/${newsId}`)
  }

  const handleCategoryChange = (categoryId: string) => {
    setSelectedCategory(categoryId)
    setCurrentPage(1)
  }

  const handleSortChange = (sortId: string) => {
    setSortBy(sortId)
    setCurrentPage(1)
  }

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    // 实现搜索逻辑
    console.log("搜索:", searchQuery)
  }

  const getNewsTypeIcon = (type: string) => {
    switch (type) {
      case "success_story":
        return <Award className="w-3 h-3 mr-1" />
      case "funding_news":
        return <DollarSign className="w-3 h-3 mr-1" />
      case "policy_analysis":
        return <FileText className="w-3 h-3 mr-1" />
      case "market_analysis":
        return <BarChart3 className="w-3 h-3 mr-1" />
      case "tech_trend":
        return <Cpu className="w-3 h-3 mr-1" />
      case "business_model":
        return <Building className="w-3 h-3 mr-1" />
      case "industry_report":
        return <PieChart className="w-3 h-3 mr-1" />
      case "startup_tips":
        return <Lightbulb className="w-3 h-3 mr-1" />
      default:
        return <BookOpen className="w-3 h-3 mr-1" />
    }
  }

  const getNewsTypeColor = (type: string) => {
    switch (type) {
      case "success_story":
        return "bg-green-100 text-green-700"
      case "funding_news":
        return "bg-blue-100 text-blue-700"
      case "policy_analysis":
        return "bg-purple-100 text-purple-700"
      case "market_analysis":
        return "bg-orange-100 text-orange-700"
      case "tech_trend":
        return "bg-cyan-100 text-cyan-700"
      case "business_model":
        return "bg-indigo-100 text-indigo-700"
      case "industry_report":
        return "bg-pink-100 text-pink-700"
      case "startup_tips":
        return "bg-yellow-100 text-yellow-700"
      default:
        return "bg-gray-100 text-gray-700"
    }
  }

  const getNewsTypeName = (type: string) => {
    switch (type) {
      case "success_story":
        return "成功案例"
      case "funding_news":
        return "投融资"
      case "policy_analysis":
        return "政策解读"
      case "market_analysis":
        return "市场分析"
      case "tech_trend":
        return "技术趋势"
      case "business_model":
        return "商业模式"
      case "industry_report":
        return "行业报告"
      case "startup_tips":
        return "创业技巧"
      default:
        return "资讯"
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30">
      {/* 顶部导航 */}
      <header className="bg-white/80 backdrop-blur-xl border-b border-slate-200/50 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => router.push("/")}
                className="flex items-center space-x-2"
              >
                <ArrowLeft className="w-4 h-4" />
                <span>返回首页</span>
              </Button>
              <div className="h-6 w-px bg-slate-200" />
              <h1 className="text-xl font-bold text-slate-900">📰 创业资讯</h1>
            </div>
            
            <div className="flex items-center space-x-4">
              <form onSubmit={handleSearch} className="flex items-center space-x-2">
                <div className="relative">
                  <Search className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                  <Input
                    placeholder="搜索资讯、关键词..."
                    className="pl-10 w-64 bg-white/70"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
                <Button type="submit" size="sm">
                  搜索
                </Button>
              </form>
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          {/* 主要内容区 */}
          <div className="lg:col-span-3">
            {/* 筛选和排序 */}
            <div className="mb-8">
              <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
                <div>
                  <h2 className="text-2xl font-bold text-slate-900 mb-2">最新资讯</h2>
                  <p className="text-slate-600">第一时间了解创业行业动态</p>
                </div>
                <div className="flex items-center space-x-2">
                  <Filter className="w-4 h-4 text-slate-400" />
                  <select 
                    className="px-3 py-2 border border-slate-200 rounded-lg bg-white text-sm"
                    value={sortBy}
                    onChange={(e) => handleSortChange(e.target.value)}
                  >
                    {sortOptions.map(option => (
                      <option key={option.id} value={option.id}>{option.name}</option>
                    ))}
                  </select>
                </div>
              </div>
            </div>

            {/* 分类标签 */}
            <div className="mb-8">
              <div className="flex flex-wrap gap-2">
                {categories.map(category => {
                  const Icon = category.icon
                  return (
                    <Button
                      key={category.id}
                      variant={selectedCategory === category.id ? "default" : "outline"}
                      size="sm"
                      onClick={() => handleCategoryChange(category.id)}
                      className="flex items-center space-x-1"
                    >
                      <Icon className="w-3 h-3" />
                      <span>{category.name}</span>
                    </Button>
                  )
                })}
              </div>
            </div>

            {/* 新闻列表 */}
            {loading ? (
              <div className="space-y-4">
                {[...Array(5)].map((_, i) => (
                  <Card key={i} className="animate-pulse">
                    <CardContent className="p-6">
                      <div className="h-4 bg-slate-200 rounded w-3/4 mb-2"></div>
                      <div className="h-3 bg-slate-200 rounded w-full mb-4"></div>
                      <div className="h-3 bg-slate-200 rounded w-2/3"></div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            ) : (
              <div className="space-y-6">
                {newsData.map(news => (
                  <Card
                    key={news.id}
                    className={`cursor-pointer hover:shadow-lg transition-all duration-200 hover:-translate-y-1 bg-white/70 backdrop-blur-sm border-0 ${news.featured ? 'ring-2 ring-blue-500/20' : ''}`}
                    onClick={() => handleNewsClick(news.id)}
                  >
                    <CardContent className="p-6">
                      <div className="flex items-start space-x-4">
                        {news.featured && (
                          <div className="flex-shrink-0">
                            <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
                          </div>
                        )}
                        <div className="flex-1">
                          <div className="flex items-center space-x-2 mb-3">
                            <Badge className={`${getNewsTypeColor(news.type)} text-xs`}>
                              {getNewsTypeIcon(news.type)}
                              {getNewsTypeName(news.type)}
                            </Badge>
                            <Badge variant="outline" className="text-xs">
                              {news.readTime}
                            </Badge>
                            {news.priority === "high" && (
                              <Badge className="bg-red-100 text-red-700 text-xs">
                                <TrendingUp className="w-3 h-3 mr-1" />
                                热门
                              </Badge>
                            )}
                          </div>
                          
                          <h3 className="text-lg font-semibold text-slate-900 mb-2 hover:text-blue-600 transition-colors">
                            {news.title}
                          </h3>
                          
                          <p className="text-slate-600 text-sm mb-4 line-clamp-2">
                            {news.summary}
                          </p>
                          
                          <div className="flex items-center justify-between">
                            <div className="flex items-center space-x-4 text-sm text-slate-500">
                              <div className="flex items-center space-x-1">
                                <User className="w-3 h-3" />
                                <span>{news.author}</span>
                              </div>
                              <div className="flex items-center space-x-1">
                                <Clock className="w-3 h-3" />
                                <span>{new Date(news.publishTime).toLocaleDateString()}</span>
                              </div>
                              <div className="flex items-center space-x-1">
                                <Eye className="w-3 h-3" />
                                <span>{news.views.toLocaleString()}</span>
                              </div>
                              <div className="flex items-center space-x-1">
                                <Heart className="w-3 h-3" />
                                <span>{news.likes}</span>
                              </div>
                              <div className="flex items-center space-x-1">
                                <MessageSquare className="w-3 h-3" />
                                <span>{news.comments}</span>
                              </div>
                            </div>
                            
                            <div className="flex items-center space-x-2">
                              <div className="flex flex-wrap gap-1">
                                {news.tags.slice(0, 3).map((tag, index) => (
                                  <Badge key={index} variant="outline" className="text-xs">
                                    {tag}
                                  </Badge>
                                ))}
                              </div>
                              <ChevronRight className="w-4 h-4 text-slate-400" />
                            </div>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            )}

            {/* 分页 */}
            <div className="mt-8 flex justify-center">
              <div className="flex items-center space-x-2">
                <Button
                  variant="outline"
                  size="sm"
                  disabled={currentPage === 1}
                  onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
                >
                  上一页
                </Button>
                <span className="text-sm text-slate-600">
                  第 {currentPage} 页
                </span>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setCurrentPage(prev => prev + 1)}
                >
                  下一页
                </Button>
              </div>
            </div>
          </div>

          {/* 侧边栏 */}
          <div className="space-y-6">
            {/* 热门话题 */}
            <Card className="bg-white/70 backdrop-blur-sm border-0">
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <TrendingUp className="w-5 h-5" />
                  <span>热门话题</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  {trendingTopics.map((topic, index) => (
                    <div
                      key={index}
                      className="flex items-center justify-between p-2 rounded-lg hover:bg-slate-50 cursor-pointer transition-colors"
                    >
                      <div className="flex items-center space-x-2">
                        <span className="text-sm font-medium text-slate-700">#{topic}</span>
                      </div>
                      <Badge variant="outline" className="text-xs">
                        {Math.floor(Math.random() * 1000) + 100}
                      </Badge>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            {/* 编辑推荐 */}
            <Card className="bg-white/70 backdrop-blur-sm border-0">
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Star className="w-5 h-5" />
                  <span>编辑推荐</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {allNews.filter(news => news.featured).slice(0, 3).map(news => (
                    <div
                      key={news.id}
                      className="cursor-pointer hover:bg-slate-50 p-3 rounded-lg transition-colors"
                      onClick={() => handleNewsClick(news.id)}
                    >
                      <h4 className="font-medium text-slate-900 text-sm mb-1 line-clamp-2">
                        {news.title}
                      </h4>
                      <div className="flex items-center space-x-2 text-xs text-slate-500">
                        <span>{news.readTime}</span>
                        <span>•</span>
                        <span>{news.views.toLocaleString()} 浏览</span>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            {/* 最新评论 */}
            <Card className="bg-white/70 backdrop-blur-sm border-0">
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <MessageSquare className="w-5 h-5" />
                  <span>最新评论</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {[
                    { user: "创业者A", comment: "这篇文章分析得很到位，对我的项目很有帮助", time: "2分钟前" },
                    { user: "投资人B", comment: "新能源汽车确实是个好赛道，值得关注", time: "15分钟前" },
                    { user: "企业家C", comment: "政策支持力度确实在加大，对创业者来说是好消息", time: "1小时前" }
                  ].map((comment, index) => (
                    <div key={index} className="p-3 bg-slate-50 rounded-lg">
                      <div className="flex items-center space-x-2 mb-1">
                        <span className="text-sm font-medium text-slate-700">{comment.user}</span>
                        <span className="text-xs text-slate-500">{comment.time}</span>
                      </div>
                      <p className="text-sm text-slate-600">{comment.comment}</p>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}